<template>
  <div :style="{ width: state.width + 'px' }" class="container">
    <SessionList @change="handleSwitchTab" />
    <div style="width: 30px" />
    <div class="container-right">
      <el-tabs @edit="handleTabsEdit" editable v-if="Object.keys(state.tabs).length > 0" v-model="state.pan._id">
        <!-- <el-tab-pane v-for="(value, key) in state.tabs" :label="value.sessionName" :name="value._id" :key="key">
          <ChatBox :sessionId="value._id" />
        </el-tab-pane> -->
        <el-tab-pane :label="state.pan.sessionName" :name="state.pan._id">
          <ChatBox ref="chatRef" :sessionId="state.pan._id" />
        </el-tab-pane>
      </el-tabs>
      <Action />
    </div>
  </div>
</template>

<script lang="ts" setup>
import SessionList from "./components/session-list.vue"
import ChatBox from "./components/chat-box.vue"
import Action from "./components/action.vue"
import { reactive, ref, onMounted, nextTick } from "vue"
const chatRef = ref(null)
const state = reactive({
  tabs: {},
  cur_tab: "",
  width: 0,
  pan: {}
})

const handleTabsEdit = (e: string | number) => {
  delete state.tabs[e]
}
const handleSwitchTab = async (v: any) => {
  state.pan = v
  state.tabs[v?._id] = v
  nextTick(() => {
    chatRef.value?.getList(Date.now())
  })
  // state.cur_tab = v?._id
}

onMounted(async () => {
  state.width = document.documentElement.clientWidth - 40
})
</script>

<style scoped lang="scss">
@import "@/styles/mixins.scss";
.container {
  display: flex;
  height: calc(100% - 30px);
  /* width: calc(100vw - 40px);; */
  padding: 15px;
  overflow: hidden;
  background: white;
  margin: 15px 20px;
  &-right {
    width: calc(100% - 330px);
    background: white;
    overflow: hidden;
    :deep(.el-tabs) {
      height: calc(100% - 40px);
      .el-tabs__new-tab {
        visibility: hidden;
      }
      .el-tabs__content {
        height: calc(100% - 55px);
      }
      .el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>
